Skip to main content

Code Splitting

Code splitting is a technique that allows you to split your code into various bundles which can then be loaded on demand or in parallel.

Catalyst supports code splitting through React's lazy and Suspense components. This allows you to load components only when they are needed, reducing the initial bundle size and improving performance.

Route-based Code Splitting​

The most common way to implement code splitting is through route-based splitting. Each route can be loaded independently:

src/js/routes/index.js
import { lazy } from 'react';

const Home = lazy(() => import('../pages/Home/Home'));
const About = lazy(() => import('../pages/About/About'));
const Products = lazy(() => import('../pages/Products/Products'));

const routes = [
  {
    path: "/",
    index: true,
    component: Home,
  },
  {
    path: "/about",
    component: About,
  },
  {
    path: "/products",
    component: Products,
  },
];

export default routes;

Component-based Code Splitting​

You can also split individual components within a page:

src/js/pages/About/About.js
import { lazy, Suspense } from 'react';

const LazyContactForm = lazy(() => import('./LazyContactForm'));
const LazyFeatureList = lazy(() => import('./LazyFeatureList'));
const LazyTeamInfo = lazy(() => import('./LazyTeamInfo'));

const About = () => {
  return (
    <div>
      <h1>About Us</h1>
      
      <Suspense fallback={<div>Loading contact form...</div>}>
        <LazyContactForm />
      </Suspense>
      
      <Suspense fallback={<div>Loading features...</div>}>
        <LazyFeatureList />
      </Suspense>
      
      <Suspense fallback={<div>Loading team info...</div>}>
        <LazyTeamInfo />
      </Suspense>
    </div>
  );
};

export default About;

Benefits of Code Splitting​

  1. Faster Initial Load: Only load the code needed for the current route
  2. Better Performance: Smaller bundles mean faster parsing and execution
  3. Improved User Experience: Users see content faster
  4. Bandwidth Optimization: Reduces data usage for users

Best Practices​

  • Use meaningful chunk names for better debugging
  • Implement proper loading states with Suspense
  • Consider the trade-off between bundle size and network requests
  • Monitor bundle sizes in production builds

Live Examples​

Lazy Loading Demo

See how components are loaded on demand with React.lazy() and Suspense

📄About.js
▶
⚙
Explorer
📂src
📂js
📁components
📂pages
📄About.js
📁routes
📁store
📁public
📄package.json
1import React from 'react'
2import { useCurrentRouteData } from '@tata1mg/router'
3import styles from './styles.module.css'
4 
5const ComponentName = () => {
6 const { data, error, isFetching } = useCurrentRouteData()
7 
8 if (isFetching) return <div>Loading...</div>
9 if (error) return <div>Error: {error.message}</div>
10 
11 return (
12 <div className={styles.container}>
13 <h1>Welcome to Catalyst</h1>
14 <p>This is a live code example.</p>
15 </div>
16 )
17}
18 
19export default ComponentName

Loading CodeSandbox...

Route-Based Code Splitting

Explore how pages are split into separate chunks and loaded when routes are accessed

📄index.js
▶
⚙
Explorer
📂src
📂js
📁components
📂pages
📄index.js
📁routes
📁store
📁public
📄package.json
1import React from 'react'
2import { useCurrentRouteData } from '@tata1mg/router'
3import styles from './styles.module.css'
4 
5const ComponentName = () => {
6 const { data, error, isFetching } = useCurrentRouteData()
7 
8 if (isFetching) return <div>Loading...</div>
9 if (error) return <div>Error: {error.message}</div>
10 
11 return (
12 <div className={styles.container}>
13 <h1>Welcome to Catalyst</h1>
14 <p>This is a live code example.</p>
15 </div>
16 )
17}
18 
19export default ComponentName

Loading CodeSandbox...

Code Splitting Strategies​

Route-based code splitting​

Route-based code splitting is a powerful technique in React applications. It loads code for specific routes or pages only when needed, improving initial load times and reducing JavaScript download size.

In Catalyst, you can achieve route-based code splitting by lazy loading your pages in src/js/routes/index.js.

src/js/routes/index.js
import HomeFallback from "@Fallback/HomeFallback/HomeFallback.js"
const Home = loadable (() => "@pages/Home/Home.js",{
    ssr:false,
    fallback: <HomeFallback />
})

const routes = [
  {
    path: "/",
    end: true,
    component: Home,
  },
];

Component based code splitting​

When optimizing your application's performance, component-based code splitting is a powerful strategy. It allows you to load specific components only when needed, based on certain conditions. For instance, you might want to render a component only if a user is logged in.


const UserDetails = loadable(()=> import("@components/UserDetails/UserDetails.js"),
{
    ssr:false,
})

const Profile = ({ isLoggedIn }) => {
  if (isLoggedIn) {
    return <UserDetails />;
  } else {
    <button label="Log In" />;
  }
};


export default Profile